<template>
  <div class="skill-container">
    <TitleB
      :title="skillInfo.moduleTitle"
      iconName="el-icon-s-opportunity"
      :backgroundColor="myThemeColor"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
    ></TitleB>
    <div style="padding: 0 15px">
      <AutoTextArea
        v-for="skillItem in skillInfo.skillDecList"
        :key="skillItem.id"
        :data="skillItem.desc"
        shape="point"
        @textChange="onSkillDecChange(skillItem.id, $event)"
      ></AutoTextArea>
    </div>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import AutoTextArea from '@/components/base/AutoTextArea.vue'
import {nanoid} from 'nanoid'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      skillInfo: {
        moduleTitle: '',
        skillDecList: [],
      },
      id: '',
    }
  },
  props: {
    skillProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '专业技能',
          skillDecList: [
            { id: new Date().getTime(), desc: '你好' },
            { id: new Date().getTime() + 2, desc: 'html,css,js' },
            { id: new Date().getTime() + 5, desc: 'es6' },
          ],
        }
      },
    },
    moduleId: {
      type: String,
       default: nanoid(),
    },
  },
    computed:{
    ...mapGetters(['myThemeColor'])
  },
  created() {
    this.skillInfo = { ...this.skillProps }
    this.id = this.moduleId
  },
  methods: {
    onSkillDecChange(id, newVal) {
      this.skillInfo.skillDecList.some((item) => {
        if (item.id === id) {
          item.desc = newVal
          return
        }
      })
      this.updateStore()
    },
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addSkill()
          break
        case 'delete':
          this.deleteSkill()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    addSkill() {
      if (this.skillInfo.skillDecList.length >= 10) {
        this.$message.warning('最多允许添加10条记录')
      } else {
        let id = new Date().getTime()
        const skill = {
          id,
          desc: '一项新技能',
        }
        this.skillInfo.skillDecList.push(skill)
        this.updateStore()
      }
    },
    deleteSkill() {
      if (this.skillInfo.skillDecList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.skillInfo.skillDecList.pop()
        this.updateStore()
      }
    },
    removeModule() {
      console.log( this.id);
      this.$store.commit('removeModule', this.id)
    },
    onModuleTitleUpdate(newTitle) {
      this.skillInfo.moduleTitle = newTitle
      this.updateStore()
    },
    updateStore() {
      const newData = { props: this.skillInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    AutoTextArea,
  },
}
</script>

<style scoped lang="less">
.skill-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
